<template>
    <button
    ref="_ref"
    class="vk-button"
    :class="{
        [`vk-button--${type}`]:type,
        [`vk-button--${size}`]:size,
        'is-plain':plain,
        'is-round':round,
        'is-circle':circle,
        'is-disabled':disabled,
    }"
    :disabled="disabled"
    :autofocus="autofocus"
    :type="nativeType"
    >
    <span>
      <slot />    
    </span>
    </button>
</template>
<script lang='ts' setup>
import { ref } from 'vue'
    import type { ButtonProps } from './types';

    defineOptions({name:'VKButton'})
    withDefaults(defineProps<ButtonProps>(),{
        nativeType:'button'
    })

    const _ref = ref<HTMLButtonElement>()

    defineExpose({
        ref: _ref
    })
</script>